<template>
  <div class="search-box">
    <div class="flex">
      <div>
        <el-icon>
          <Search />
        </el-icon><span>筛选搜索</span>
      </div>
      <div>
        <el-button @click="resetForm">重置</el-button>
        <el-button @click="submitFn" type="primary">查询搜索</el-button>
      </div>
    </div>
    <div style="padding-top: 20px">
      <el-form @submit.prevent="submitFn" ref="searchFormRef" :model="listParams">
        <el-form-item prop="keyword" label="账号/姓名：" label-width="120px">
          <el-input placeholder="请输入账号、姓名" v-model="listParams.keyword"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <div class="add-box">
    <el-button type="primary" @click="addUser">添加</el-button>
  </div>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="编号" align="center"> </el-table-column>
    <el-table-column prop="username" label="账号" align="center"></el-table-column>
    <el-table-column prop="nickName" label="姓名" align="center"></el-table-column>
    <el-table-column prop="email" label="邮箱" align="center"></el-table-column>
    <el-table-column prop="createTime" label="创建时间" align="center">
      <template #default="scope">
        {{ fomatDate(scope.row.createTime) }}
      </template>
    </el-table-column>
    <el-table-column prop="loginTime" label="登录时间" align="center">
      <template #default="scope">
        {{ fomatDate(scope.row.loginTime) }}
      </template>
    </el-table-column>
    <el-table-column label="是否启用" align="center">
      <template #default="scope">
        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="changeHandle(scope.row)" />
      </template>
    </el-table-column>
    <el-table-column label=" 操作" align="center">
      <template #default="scope">
        <el-button el-button link type="primary" @click="handleEdit(scope.row.id)">分配角色</el-button>
        <el-button link type="primary" @click="editHandle(scope.row.id)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="lastpage" v-if="listParams.pageNum === totalPage">暂无更多数据</div>
  <ElConfigProvider :locale="zhCn">
    <el-pagination v-model:currentPage="listParams.pageNum" v-model:page-size="listParams.pageSize" background
      layout="total, sizes, prev, pager, next ,jumper" :total="total" @size-change="pageSizeChange"
      @current-change="currentChange" :page-sizes="[10, 20, 50, 100]" />
  </ElconfigProvider>
  <EditUserVue :show="showEditUser" @hide="hideDialog" @refresh="getList" :data="editId" />
  <AllocRoleVue :show="showAllocRole" @hide="hideAllocRole" :data="allocRoleId" />
</template>
  
<script lang="ts" setup>
import { ElConfigProvider, FormInstance } from "element-plus"
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { user } from "@/api"
import { reactive, ref, toRefs } from "vue";
import { fomatDate } from "@/utils"
import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import EditUserVue from "./components/EditUser.vue"
import AllocRoleVue from "./components/AllocRole.vue";

interface IState {
  tableData: IUserModel[];
  listParams: IUserListParams;
  total: number;
  totalPage: number;
}
const state = reactive<IState>({
  tableData: [],
  listParams: {
    keyword: "",
    pageNum: 1,
    pageSize: 10,
  },
  total: 0,
  totalPage: 0,
})
const searchFormRef = ref<FormInstance>();

const showEditUser = ref(false)

const addUser = () => {
  showEditUser.value = true
}

const hideDialog = () => {
  showEditUser.value = false
  editId.value = 0;
}

const getList = () => {
  user.getUserListApi(state.listParams).then((res) => {
    if (res.code === 200) {
      state.tableData = res.data.list
      state.total = res.data.total;
      state.totalPage = res.data.totalPage
    }
  });
};

getList();

const submitFn = () => {
  state.listParams.pageNum = 1;
  getList();
}
const pageSizeChange = (val: number) => {
  getList();
}
const currentChange = (val: number) => {
  getList();
}

const showAllocRole = ref(false)
const allocRoleId = ref(0)
const handleEdit = (id: number) => {
  showAllocRole.value = true;
  allocRoleId.value = id
};

const hideAllocRole = () => {
  showAllocRole.value = false;
  allocRoleId.value = 0
};

const editId = ref(0)

const editHandle = (id: number) => {
  editId.value = id;
  showEditUser.value = true;
}
const resetForm = () => {

  searchFormRef.value?.resetFields();
}
const handleDelete = (index: number, row: IUserModel) => {
  console.log(index, row);
};

const changeHandle = ({ id, status }: IUserModel) => {
  console.log(id, status);

  user.updateUserStatusApi({
    id,
    status
  }).then(res => {
    ElMessage({
      message: res.message,
      type: res.code === 200 ? "success" : "error"
    })
  }).catch(err => {
    // row.status = row.status === 1 ? 0 : 1;
    let target = state.tableData.find(item => item.id === id)
    target && (target.status = status === 1 ? 0 : 1)
  })

}

let { tableData, listParams, total, totalPage } = toRefs(state);
</script>

<style lang="less" scoped>
.search-box {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;

  .flex {
    display: flex;
    justify-content: space-between;
  }
  .el-input {
  width: 30%;
}
}



.add-box {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  margin: 20px;
  border-radius: 10px;
  box-shadow: 0 0 4px 2px #ccc;
}

.lastpage {
  width: 100%;
  text-align: center;
}
</style>